<template>
	<view class="container">
		<view v-if="feedbackFlag">
			<view class="status-title">
				<u-icon name="clock"  color="#fff" size="20" labelSize="20" labelColor="#fff" v-if="feedback.status == 0" label = "问题待处理"></u-icon>
				<u-icon name="clock" color="#fff" size="20" labelSize="20" labelColor="#fff" v-if="feedback.status == 1" label = "已处理"></u-icon>
			</view>
			<view class="main">
				<view class="card">
					<view class="content">
						<text>
							{{feedback.content}}
						</text>
					</view>
					<u-image :src="$configPath.imgURL +  feedback.imgUrl" width="130" height="130" @click="previewImg($configPath.imgURL + feedback.imgUrl)" v-if="feedback.imgUrl != null"></u-image>
					<view class="line">
						<view class="line-title">反馈类型</view>
						<view v-if="feedback.type == 1">问题</view>
						<view v-if="feedback.type == 2">意见</view>
						<view v-if="feedback.type == 3">投诉</view>
					</view>
					<view class="line">
						<view class="line-title">投诉时间</view>
						<view>{{$date.dateFormatYMDHMS(feedback.createTime)}}</view>
					</view>
					<view class="line">
						<view class="line-title">用户昵称/ID</view>
						<view>{{feedback.nickName}}/{{feedback.memberId}}</view>
					</view>
					<view class="line" @click="dialModel = true">
						<view class="line-title">用户联系方式</view>
						<view>{{feedback.phone}}</view>
					</view>
					<view class="line">
						<view class="line-title">设备编号</view>
						<view class="u-font-sm">
							{{feedback.deviceAlias?feedback.deviceAlias:''}}号_
							{{feedback.deviceTypeName?feedback.deviceTypeName:''}}_{{feedback.deviceNo?feedback.deviceNo:''}}
						</view>
						<text class="u-font-sm" v-if="feedback.remarkName != null && feedback.remarkName != ''">（{{feedback.remarkName}}）</text>
					</view>
					<view class="line">
						<view class="line-title">当前设备状态</view>
						<view v-if="feedback.deviceStatus == 0">下架</view>
						<view v-if="feedback.deviceStatus == 1">上架</view>
						<view v-if="feedback.deviceStatus == 2">故障</view>
						<view v-if="feedback.deviceStatus == 3">未激活</view>
						<view v-if="feedback.deviceStatus == 4">解绑</view>
					</view>
					<view class="line">
						<view class="line-title">固件版本号</view>
						<view>{{feedback.firmwareVersion?feedback.firmwareVersion:''}}</view>
					</view>
					<view class="line">
						<view class="line-title">设备场地</view>
						<view>{{feedback.storeName?feedback.storeName:''}}</view>
					</view>
				</view>
				<view v-if="feedback.status == 0">
					<view class="card">
						<view class="input-title">回复内容</view>
						<view>
							<u--textarea v-model="replay"  height="50"   maxlength = "40" placeholder="请输入内容" ></u--textarea>
						</view>
					</view>
					<view class="btn">
						<u-button :customStyle="ackbtn" @click="dispose()">确认处理</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-empty text='暂无反馈信息' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<u-modal :show="dialModel" title="提示" show-cancel-button @cancel="dialModel = false" @confirm="dialConfirm">
			<view class="slot-content u-m-20">
				确定要拨打电话: {{feedback.phone}} 吗?
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				replay: '',
				status: 0,
				form: {
					sendCoin: 1,
					remark: ''
				},
				feedbackId: 0,
					feedback:{},
				feedbackFlag: false,
				userInfo: {},
				dialModel: false,
				btn:{
					width:'170rpx',
					backgroundColor: '#6072FF',
					color:'#fff',
					height:'50rpx'
				},
				ackbtn:{
					backgroundColor: '#6072FF',
					color:'#fff'
				},
				
			}
		},
		onLoad(param) {
			if(param.id != null){
				this.findData(param.id);
				this.feedbackId = param.id
			}
		},
		methods: {
			dialConfirm(){
				if(this.$u.test.isEmpty(this.feedback.phone)){
					this.$helpers.toast('获取手机失败');
					return
				}
				console.log("暂时无法拨通！")
				// window.location.href = "tel:" + feedback.phone;
			},
			findData(feedbackId){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$api('feedback.findByIdAndUserId',{feedbackId:feedbackId}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if(res.data != null){
						this.feedbackFlag = true;
						this.feedback = res.data;
						console.log(this.feedback)
						if(res.data.status == 1){
							this.getUserInfo();
						}
					}
				})
			},
			previewImg(imgUrl){
				uni.previewImage({
					urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			getUserInfo(){
				this.$api('user.getUserInfo').then(res => {
					this.userInfo = res.data;
				})
			},
			showWelfare(){
				this.feedback.code = 1;
				this.$refs.rWelfare.showWelfare(this.feedback);
			},
			// 提交处理
			dispose(){
				uni.showLoading({
					title:'提交中...',
					mask:true
				})
				if(this.replay == null || this.replay == ''){
					uni.hideLoading();
					this.$helpers.toast('请填写回复内容');
					return;
				}
				this.$api('feedback.update',{id: this.feedbackId,replay : this.replay}).then(res => {
					uni.hideLoading();
					if(res.data > 0){
						this.$helpers.toast('回复成功!');
						setTimeout(()=>{
							this.findData(this.feedbackId);
						},1000)
					}else{
						this.$helpers.toast('回复失败!');
					}
				}).catch(() => {
					uni.hideLoading();
					this.$helpers.toast('回复失败!');
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: linear-gradient(#6072FF,#f2f3f5);
		background-attachment: fixed;
	}
	.u-textarea__field{
		padding-left: 20rpx !important;
	}
	.u-button--square{
		border-radius: 17rpx !important;
	}
	.container{
		.status-title{
			display: flex;
			justify-content: center;
			padding: 30rpx;
		}
		.main{
			padding: 0 $u-padding-large $u-padding-large $u-padding-large;
			.card{
				background-color: #fff;
				padding: $u-padding-medium;
				border-radius: $uni-border-radius-lg;
				margin-bottom: $u-margin-mini;
				.content{
					padding-bottom: $u-padding-large;
				}
				
				.line{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: $u-margin-large;
					font-size: $uni-font-size-base;
					.line-title{
						color: $u-tips-color;
					}
				}
				.operate{
					padding: $u-padding-mini $u-padding-large;
					margin-top: $u-margin-large;
					background-color: #f3f4f6;
					display: flex;
					justify-content: space-between;
				}
				
				.input-title{
					font-size: $uni-font-size-lg;
					padding-bottom: $u-padding-medium;
				}
			}
			
			.btn{
				padding: $u-padding-large 0;
			}
			.content-info{
				display: flex;
				
				.left{
					width: 40rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;
					.head{
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(#6072FF,.11);
						border-radius: 50%;
						.point{
							display: inline-block;
							width: 16rpx;
							height: 16rpx;
							background:$u-primary;
							border-radius: 50%;
						}
					}
					.vertical-line{
						display: inline-block;
						width: 5rpx;
						height: 100%;
						background: linear-gradient(180deg,#6072FF,#fff);
						// 改变竖条高度
						min-height: 300rpx;
						margin-top: 5rpx;
					}
				}
				.right{
					flex: 10;
					.top{
						display: flex;
						justify-content: space-between;
						
						.name{
							font-size: $uni-font-size-base;
						}
						.time{
							color:$u-tips-color;
							font-size: $uni-font-size-sm;
						}
					}
					.bottom{
						background: $u-bg-color;
						border-radius: $uni-border-radius-base;
						padding: $u-padding-medium;
						font-size: $uni-font-size-base;
						text-align: left;
						margin-top: $u-margin-medium;
						color: $u-content-color;
					}
				}
			}
			
		}
	}
	
</style>
